<template>
  <div class="main relative">
    <div class="environment-header">
      <zz-back class="left" name="视频监控" :title=pname style="padding: 0" v-if="this.currentUser.type === 1"></zz-back>
      <p class="title left color" v-else>视频监控</p>
      <div class="head-right targetSet right" v-if="this.currentUser.type !== 1">
        <i class="iconfont icon-guanlian-sekuaiicon"></i>
        <button @click="getDeviceVideoList" style="padding:0;">关联<span>海康8700</span>平台配置</button>
      </div>
    </div>
    <div class="info">
      <div class="top-tit relative">
        视频监控
        <div class="head-right">
          <a v-if="projectId && browseScreen" :href="$site.videoServer+'/#/video/screen/project?name='+ $route.query.name + '&pjId=' + projectId + '&auto=true'" class="button-block">查看大屏轮播</a>
          <a v-if="!projectId && browseScreen" :href="$site.videoServer+'/#/video/screen/project?name='+ currentUser.pjName + '&pjId=' + currentUser.pjId + '&auto=true'" class="button-block">查看大屏轮播</a>
        </div>
      </div>
      <zz-table
        id='monitorList'
        style="margin: 15px -20px 0"
        :title="tableTitle"
        :dataList = 'dataList'
        @handle="tableHandler">
      </zz-table>
    </div>
    <div class="videocut">
      <div class="top-tit">
        监控抓拍
      </div>
      <div class="video-main relative">
        <div class="title-group">
          <button class="button-common" :class="{'button-all': type === ''}" @click="chooseType('')">全部(<span>{{totalNum.allAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '6'}" @click="chooseType('6')">物品(<span>{{totalNum.goodsMovementEarlyAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '1'}" @click="chooseType('1')">安全帽(<span>{{totalNum.safetyHatEarlyAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '4'}" @click="chooseType('4')">闯入(<span>{{totalNum.intrudeEarlyAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '5'}" @click="chooseType('5')">聚集(<span>{{totalNum.gatherEarlyAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '3'}" @click="chooseType('3')">烟雾(<span>{{totalNum.smokeAlarm}}</span>)</button>
          <button class="button-common" :class="{'button-all': type === '2'}" @click="chooseType('2')">明火(<span>{{totalNum.flameAlarm}}</span>)</button>
        </div>
        <zz-select
          style="right: 0; top: -10px; position:absolute; border:1px solid #ddd; width: 133px;"
          :option="timeList"
          name="近7天"
          background="none"
          :options="{width: '100%'}"
          iconPosition="left"
          :isArrowRight = false
          @optionClick="timeCallback">
        </zz-select>
        <div class="video-group">
          <div class="video-item" v-for="(item, index) in videoList">
            <div class="video-box" @click="showVideo(item)">
              <zz-preview :isFilling="true" width="100%" height="100%" :item="item.files" :th="1"></zz-preview>
              <div class="bottom-info">
                <i class="iconfont icon-triangle-right play-icon"></i>
                【{{item.cameraName}}-{{item.typeName}}{{$moment(item.creatTime).format('YYYY年MM月DD日')}}】
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关联平台设置编辑弹窗 -->
    <zz-dialog
      :title = dialogTitle
      :visible = showDialog
      :showConfirm = true
      :reset = true
      :showFoot = "false"
      @close="close(1)">
      <div class="dialog-box">
        <div style="width: 580px; height: 590px">
          <table class="top-table">
            <tr>
              <th style="width:25%;">监控中心</th>
              <td class="relative">
                <zz-select
                  :disabled = "!canset"
                  style="width: 100%; padding:0;"
                  :option="optionsList"
                  :name = uuName
                  background="none"
                  :options="{width: '100%'}"
                  iconPosition="left"
                  :isArrowRight = false
                  @optionClick="changecallback">
                </zz-select>
              </td>
            </tr>
            <tr>
              <th>
                监控中心编号
              </th>
              <td>
              <input :disabled="canset !== true" style="width: 100%;border:none;" @change="changeFile($event)" :placeholder = unitUuid :value="unitUuid">
              </td>
            </tr>
          </table>
          <div class="sm-tit">
            配置标段监控区域(可选)
          </div>
          <div class="period-box-container">
            <table v-for="(item, index1) in platformObject.projectStageAndSection" class="period-box">
              <tr class="period">
                <th colspan="2">{{index1 + 1}}期</th>
              </tr>
              <tr v-for="(item2, index2) in item.sectionDtoList">
                <th style="width: 25%">
                  {{item2.sectionName}}
                </th>
                <td class="relative hasAreaList">
                  <button v-for="(item3, index) in item2.additionalList" class="button-block relative mr10 ">{{item3.regionName}}<i class="iconfont icon-x" @click="delArea(index,index1, index2, item3)" v-if="canset"></i></button>
                  <!-- <i v-if="canset" class="iconfont icon-plus" @click="getRegions(item,item2, index1, index2)" style="cursor: pointer"></i> -->
                  <i v-if="canset" class="iconfont icon-plus" @click="getAreaList(item,item2, index1, index2)" style="cursor: pointer"></i>
                </td>
              </tr>
            </table>
          </div>
          <div class="footer-right" v-if="projectManageMmaintain">
            <button type="button" class="button-line mt20 mr20" v-if="!canset" @click="editSet">修改设置</button>
            <button class="cancel button-line mt20" type="button" @click="cancelSet" v-if="canset">取消</button>
            <button class="confirm button-block mt20 mr20" type="button" @click.stop="confirm()" v-if="canset">确定</button>
          </div>
        </div>
      </div>
    </zz-dialog>
    <!-- 增加区域设置弹层 -->
    <zz-dialog
      :title = areaDialogTitle
      :visible = showAreaDialog
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close(2)">
      <div class="dialog-box">
        <div class="area-list" style="width: 300px; height:400px;">
          <div class="area-num">
            <span>
              监控中心：
            </span>
            <span>
              {{unitUuid}}
            </span>
          </div>
          <ul class="list-box" id="list-box">
            <li v-for="(item, index) in areaList" :class="{'tick': item.set}" :key="index" @click="changeStatus(index)">
              {{item.regionName}}
              <i class="iconfont icon-tick right"></i>
            </li>
          </ul>
          <div class="footer-right">
            <button class="cancel button-line mt20" type="button" @click.stop="close(2)">取消</button>
            <button class="confirm button-block mt20 mr20" type="button" @click.stop="addTarget()">确定</button>
          </div>
        </div>
      </div>
    </zz-dialog>
    <!-- 直播 -->
    <zz-dialog
      :title = "videoDialogTitle"
      :visible = showAiVideo
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close(3)">
      <div class="dialog-box" style="width: 900px; height: 500px;">
        <aivideo ref="_aivideo" @backVideo="aiBackVideo" :aiVideoUuid="aiVideoUuid"></aivideo>
      </div>
    </zz-dialog>
    <!-- 抓拍 -->
    <zz-dialog
      :title = backVideoDialogTitle
      :visible = showCutVideo
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close(4)">
      <div class="dialog-box" style="width: 800px; height: 500px;">
        <div class="cutVideo">
          <zz_backvideo ref="backvideoDom"></zz_backvideo>
        </div>
        <div class="cut-info mt15">
          <div class="tit left">
            <!--{{cutObject.cameraName}}-{{cutObject.typeName}}{{$moment(cutObject.creatTime).format('YYYY年MM月DD日')}}-->
          </div>
          <div class="time right">
            <!--<span>抓拍： {{$moment(cutObject.creatTime).format('YYYY年MM月DD日 HH:mm:ss')}}</span>-->
            <!--<span>抓拍事件： {{cutObject.typeName}}</span>-->
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import aivideo from './aivideo'
import { getProjectVideoList, getProjectVideoCatchCount, getProjectVideoCatchList, getPreviewParam, getPlaybackParamByPlanUuid, updateDeviceVideoPriority, getDeviceVideoListByTenders, getRegionsByUnitUuid, updateDeviceVideoListByUnit } from '../../../service/api.js'

export default {
  name: 'programelevalormonitor',
  components: {
    aivideo
  },
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        projectManageMmaintain: true,  // 是否具有维护权限
        browseScreen: true, // 大屏权限
        dataList: [],
        type: '',
        tableTitle: [
          {name: '摄像头名称', width: '20%', align: 'center'},
          {name: '类型', width: '10%', align: 'center'},
          {name: '摄像头ID', width: '30%', align: 'center'},
          {name: '状态', width: '15%', align: 'center'},
          {name: '操作', width: '25%', align: 'center'}
        ],
        timeList: {
          2: '今日',
          1: '近7天',
          3: '近30天'
        },
        videoList: [],
        dialogTitle: '关联海康8700平台设置',
        showDialog: false,   // 平台设置弹层
        optionsList: {},
        showAreaDialog: false,  // 增加监控弹层
        showAiVideo: false,  // 直播弹层
        showCutVideo: false,  // 抓拍弹层
        areaDialogTitle: '海康8700平台监控区域',
        areaList: [],
        canset: false,  // 是否可设置
        setDay: 1,  // 近7天为1， 今日为2， 近30天为3
        totalNum: {},   // 监控抓拍统计数据
        projectId: '',
        cutObject: {},  // 监控抓拍对象
        platformObject: {},  // 平台设置对象
        uuName: '',  // 平台中心名称
        unitUuid: '', // 中心id
        platformType:  1, // 中心平台
        addQuery: {
          stageId: '',
          sectionId: '',
          index1: 0,
          index2: 0
        },
        pname: '',
        upList: [], // 需上传的区域列表
        videoDialogTitle: null,
        backVideoDialogTitle: null,
        aiVideoUuid: ''
      }
    },
    mounted () {
      if (this.currentUser.type === 1) {
        this.projectId = this.$route.query.id
      } else {
        this.projectId = this.currentUser.pjId
      }
      if (this.currentUser.type === 1) {
        this.pname = "【" + this.$route.query.name + "】"
      } else {
        this.pname = this.currentUser.pjName
      }
      this.getAuth()
      this.getVideoList()  // 视频监控列表
      this.getCutNum()   // 监控抓拍统计数据
      this.getCut()  // 监控抓拍列表
    },
    methods: {
      getAuth () {
        let menus = this.$local.get('childMenus')
        if (menus) {
          // 是否拥有项目维护权限
          this.projectManageMmaintain = menus.some((item) => item.funCode === 'p_VideoMonitor_maintain')
          this.browseScreen = menus.some((item) => item.funCode === 'p_VideoMonitor_browse_screen')
          //this.browseScreen = true
        }
      },
      // 获取视频监控列表
      getVideoList () {
        getProjectVideoList({
          projectId: this.projectId   // 项目id
        }).then( res => {
          this.dataList = res.data
          this.dataList = this.dataList.map(item => {
            return {
              deviceVideoName: item.deviceVideoName,
              type: item.type === 0 ? '枪机' : (item.type === 1 ? '半球' : ( item.type === 2 ? '快球' : '带云镜枪机' )),
              deviceVideoUuid: item.deviceVideoUuid || '--',
              onlineStatus: item.onlineStatus === 0 ? '离线' : '在线',
              handle: this.currentUser.type === 1 ? [{name: '直播', type: 'play', data: item},{name: '回放', type: 'back', data: item}] : [{name: '直播', type: 'play', data: item},{name: '回放', type: 'back', data: item},{name: '上移', type: 'up', data: item},{name: '下移', type: 'down', data: item}]
            }
          })
          let l = this.dataList.length
          if (this.dataList.length) {
            document.getElementById('monitorList').children[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[4].children[0].children[2].style.cssText ='color:#939997';
            document.getElementById('monitorList').children[0].getElementsByTagName('tr')[l-1].getElementsByTagName('td')[4].children[0].children[3].style.cssText ='color:#939997';
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 查看详情
      tableHandler (data) {
        switch(data.type) {
          case 'play':
            this.showAiVideo = true
            this.aiVideoUuid = data.data.deviceVideoUuid
            this.videoDialogTitle = data.data.deviceVideoName
            this.getPreview(data.data.deviceVideoUuid)
            break
          case 'back':
            this.backVideoDialogTitle = data.data.deviceVideoName + '回放'
            this.getPlayBack(data.data.deviceVideoUuid)
            break
          case 'up':
            this.updateDevice(data.data.deviceVideoId, 1)
            break
          case 'down':
            this.updateDevice(data.data.deviceVideoId, 2)
            break
        }
      },
      // 查看不同的抓拍
      chooseType (type) {
        this.type = type;
        this.videoList = []
        this.getCut()
      },
      // 切换不同的时间段
      timeCallback (item) {
        this.videoList = []
        this.setDay = Number(item.key)
        this.getCut()
        this.getCutNum()
      },
      // 获取抓拍统计信息
      getCutNum () {
        getProjectVideoCatchCount({
          projectId: this.projectId,   // 项目id
          dayNum: this.setDay   // 统计时间 1 近7天  2 今天  3 近一月
        }).then( res => {
          this.totalNum = res.data
        this.totalNum.allAlarm = this.totalNum.safetyHatEarlyAlarm + this.totalNum.goodsMovementEarlyAlarm + this.totalNum.intrudeEarlyAlarm + this.totalNum.gatherEarlyAlarm + this.totalNum.smokeAlarm + this.totalNum.flameAlarm
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取抓拍列表
      getCut () {
        getProjectVideoCatchList({
          projectId: this.projectId,   // 项目id
          alarmType: this.type,  // 报警类型 1 未带安全帽  2 明火  3 烟雾  4 非法闯入  5 人员聚集 6 物品移动
          dayNum: this.setDay   // 统计周期，单位‘天’  1 近七天 2 今日 3 近一月
        }).then( res => {
          if (res.data) {
             this.videoList = res.data
             this.videoList =  this.videoList.map(item => {
                item.files = {
                  type: 1,
                  fileUuid: item.picUrl
                }
                return item
              })
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 打开视频弹窗
      showVideo (item) {
        // this.cutObject = item
        // this.showCutVideo = true
      },
      close (item) {
        if (item === 1) {
          this.showDialog = false   // 关闭设置弹层
          this.platformObject = {}
          this.uuName = ''
          this.canset = false
        } else if (item === 2) {
          for (let i = 0; i < this.areaList.length; i++) {
            this.areaList[i].set = false
          }
          this.showAreaDialog = false   // 关闭设置区域弹层
        } else if (item === 3) {
          this.showAiVideo = false    // 关闭直播弹层
          if (this.$Browser().trident) {
            this.$refs._aivideo.stopPreview()
          }
        } else if (item ===4) {
          this.showCutVideo = false
          if (this.$Browser().trident) {
            this.$refs.backvideoDom.UninitSpb()
          }
          // 关闭抓拍弹层
        } else {
          return
        }
      },
      // 平台设置里面修改监控中心
      changecallback (item) {
        this.platformType = Number(item.key)
        this.setDefault()
        // this.getRegions(this.platformType, this.unitUuid)
      },
      // 修改中心编号
      changeFile (e) {
        this.unitUuid = e.target.value
        this.setDefault()
        // this.getRegions(this.platformType, this.unitUuid)
      },
      // 关闭区域监控
      delArea (index, index1, index2, item3) {
        item3.set = false
        this.areaList.push(item3)
        this.platformObject.projectStageAndSection[index1].sectionDtoList[index2].additionalList.splice(index,1)
        // this.setUplist()
      },
      // 选择监控区域
      changeStatus(index) {
        this.areaList[index].set = !this.areaList[index].set
        if (this.areaList[index].set) {
          document.getElementById('list-box').children[index].className = 'tick'
        } else {
          document.getElementById('list-box').children[index].className = ''
        }
      },
      //  确认平台配置
      confirm () {
        this.$MessageBox({
          title: '提示',
          showClose: true,
          message: '确定绑定新的8700监控中心？重新绑定后，已有的监控抓拍记录将丢失。',
          type: 'info',
          closeValue: '在想想',
          confirmValue: '确认',
          confirmHanler: () => {
            this.updateDeviceVideoList()
            this.getVideoList()  // 视频监控列表
            this.getCutNum()   // 监控抓拍统计数据
            this.getCut()  // 监控抓拍列表
          },
          cancel: () => {
            console.log('取消设置')
          }
        })
      },
      // 取消设置
      cancelSet () {
        this.canset = false
        this.unitUuid = this.platformObject.projectUnitRelation.unitUuid
        this.getDeviceVideoList()
      },
      // 增加监控区域
      addTarget () {
        this.showAreaDialog = false
        for (let item of this.areaList) {
          if (item.set) {
            item.stageId = this.addQuery.stageId
            item.sectionId = this.addQuery.sectionId
            if (this.platformObject.projectStageAndSection[this.addQuery.index1].sectionDtoList[this.addQuery.index2].additionalList) {
              this.platformObject.projectStageAndSection[this.addQuery.index1].sectionDtoList[this.addQuery.index2].additionalList.push(item)
            } else {
              this.platformObject.projectStageAndSection[this.addQuery.index1].sectionDtoList[this.addQuery.index2].additionalList = []
              this.platformObject.projectStageAndSection[this.addQuery.index1].sectionDtoList[this.addQuery.index2].additionalList.push(item)
            }
          }
        }
        // this.setUplist()
        for (let i = 0; i <this.areaList.length; i++) {
          if (this.areaList[i].set) {
            this.areaList.splice(i, 1)
          }
        }
      },
      // 根据探头uuid获取直播预览参数
      getPreview (id) {
        getPreviewParam({
          projectId: this.projectId,
          videoUuid: id   //  探头uuid
        }).then( res => {
          this.$refs._aivideo.postParam(res)
        }).catch( err => {
          console.log(err)
        })
      },
      // 根据探头uuid获取回放预览参数
      getPlayBack (id) {
        getPlaybackParamByPlanUuid({
          videoUuid: id,   // 探头uuid
          projectId: this.projectId
        }).then( res => {
          if (res.success) {
            this.showCutVideo = true
            this.$nextTick(() => {
              this.$refs.backvideoDom.getXML(res.data)
            })
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 根据探头id上移/下移设备
      updateDevice (id, type) {
        updateDeviceVideoPriority({
          videoDeviceId: id,   // 探头id
          moveType: type   // 1 为上移， 2 为下移
        }).then( res => {
          this.getVideoList()
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取项目下标段对应设备列表
      getDeviceVideoList () {
        this.showDialog = true
        getDeviceVideoListByTenders({
          projectId: this.projectId,    // 项目id
          coid: this.currentUser.coId
        }).then( res => {
          // res.data.projectUnitRelation = null
          this.platformObject = res.data
          // 设置监控中心列表
          for (let item of res.data.platformOptions) {
            this.optionsList[item.platformId] = item.name
          }
          if (res.data.projectUnitRelation) {
            // 有过设置
            this.unitUuid = res.data.projectUnitRelation.unitUuid
            this.platformType = res.data.projectUnitRelation.platformId
            this.uuName = this.optionsList[this.platformType]
            // 获取区域列表
            // if (res.data.projectUnitRelation.platformId && res.data.projectUnitRelation.unitUuid) {
            //   this.getRegions(res.data.projectUnitRelation.platformId, res.data.projectUnitRelation.unitUuid)
            // }
          } else {
            // 没有设置过，设置一个有属性的空对象
            this.platformObject.projectUnitRelation = {
              aiId: '',
              companyId: '',
              departmentCode: '',
              departmentId: '',
              id: '',
              platformId: '',
              projectArea: '',
              projectCompany: '',
              projectId: '',
              projectName: '',
              projectSn: '',
              unitUuid: ''
            }
            this.unitUuid = ''
            this.platformType = ''
            this.uuName = ''
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 根据8700中心uuid获取区域列表
      getRegions (platform, uuid) {
        if (platform && uuid) {
          getRegionsByUnitUuid({
            unitUuid: uuid,    //  中心uuid
            platformId: platform,
            projectId: this.projectId
          }).then( res => {
            this.areaList = res.data
            this.areaList = this.areaList.map(item => {
            return {
              regionName: item.regionName,
              regionUuid: item.regionUuid,
              unitUuid: item.unitUuid,
              set: false
              }
            })
          }).catch( err => {
            console.log(err)
            this.areaList = []
          })
        } else {
          if (!platform) {
            Vue.prototype.$message.error('请选择监控中心')
          } else if (!uuid) {
            Vue.prototype.$message.error('请输入监控中心编号')
          }
        }
      },
      // 点击修改设置
      editSet () {
        this.canset = true
        this.setDefault()
        // this.getRegions(this.platformType, this.unitUuid)
      },
      // 展示区域列表
      getAreaList (item1, item2, indexn1, indexn2) {
        // 其他期次和标段都为空没有设置的时候才重新获取列表
        let hadSetArea = false
        for (let i = 0; i < this.platformObject.projectStageAndSection.length; i++) {
          for (let j = 0; j < this.platformObject.projectStageAndSection[i].sectionDtoList.length; j++) {
            if (this.platformObject.projectStageAndSection[i].sectionDtoList[j].additionalList.length !== 0) {
              hadSetArea = true
            }
          }
        }
        if (!hadSetArea) {
          this.getRegions(this.platformType,this.unitUuid)
        }
        this.addQuery.stageId = item1.stageId,
        this.addQuery.sectionId = item2.sectionId,
        this.addQuery.index1 = indexn1,
        this.addQuery.index2 = indexn2,
        this.showAreaDialog = true
        for (let i = 0; i < this.areaList.length; i++) {
          if (this.areaList[i].set) {
            this.areaList.splice(i, 1)
          }
        }
      },
      // 根据页面提供的 项目-分期-标段-设备级联对象 更新项目下视频监控设备
      updateDeviceVideoList () {
        this.platformObject.projectUnitRelation.unitUuid = this.unitUuid
        this.platformObject.projectUnitRelation.platformId = this.platformType
        console.log(this.platformObject.projectUnitRelation)
        this.setUplist()
        let data = {
          'projectId': this.projectId,   //  项目id
          'projectUnitRelation': this.platformObject.projectUnitRelation,
          'sectionUnitRelations':this.upList
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/projectWebVideoController/updateDeviceVideoListByUnit`,
          data: data,
          dataType:"json",
          contentType: "application/json;charset=utf-8"
        }).then(res => {
          this.getDeviceVideoList()
          this.canset = false
        }).catch( err => {
          this.$message.error('平台设置失败')
        })
      },
    //  设置上传的区域列表
      setUplist () {
      this.upList = []
      // this.platformObject.projectStageAndSection[index1].sectionDtoList[index2].additionalList.splice(index,1)
      for (let i = 0; i < this.platformObject.projectStageAndSection.length; i++) {
        for (let j = 0; j < this.platformObject.projectStageAndSection[i].sectionDtoList.length; j++) {
          if (this.platformObject.projectStageAndSection[i].sectionDtoList[j].additionalList) {
            for (let m = 0; m < this.platformObject.projectStageAndSection[i].sectionDtoList[j].additionalList.length; m++) {
              let obj = this.platformObject.projectStageAndSection[i].sectionDtoList[j].additionalList[m]
              let item = {
                departmentCode: obj.departmentCode || '',
                departmentId: obj.departmentId || '',
                gmtCreate: obj.gmtCreate || '',
                gmtModify: obj.gmtModify || '',
                projectId: obj.projectId || this.currentUser.pjId,
                regionName: obj.regionName || '',
                sectionId: String(obj.sectionId) || '',
                sectionUnitId: Number(obj.sectionUnitId) || '',
                stageId: String(obj.stageId) || '',
                status: (obj.set ? 1 : '') || obj.status || '',
                unitUuid: obj.unitUuid || ''
              }
              this.upList.push(item)
            }
          }
        }
      }
    },
    // platobject 设置清空
      setDefault () {
      for (let i = 0; i < this.platformObject.projectStageAndSection.length; i++) {
        for (let j = 0; j < this.platformObject.projectStageAndSection[i].sectionDtoList.length; j++) {
          this.platformObject.projectStageAndSection[i].sectionDtoList[j].additionalList = []
        }
      }
    },
      // 视频回放的回调
      aiBackVideo () {
        this.close(3)
        this.getPlayBack(this.aiVideoUuid)
      }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
    .targetSet {
      i {
        color: #22a6b5;
      }
      button {
        border: none;
        cursor: pointer;
        color: #22a6b5;
      }
    }
    .head-right {
    }
    >div {
      .top-tit {
        margin-bottom: 10px;
        padding-left: 5px;
        border-left: 2px solid #22a6b5;
        .head-right {
          position: absolute;
          top: -8px;
          right: 0;
        }
      }
    }
    .videocut {
      padding: 0 20px 0;
      .video-main {
        .title-group {
          .button-common {
            border: none;
            cursor: pointer;
          }
          .button-all {
            color: #22a6b5;
          }
        }
        .video-group {
          padding-top:10px;
          width: 100%;
          .video-item {
            width: 20%;
            height: 178px;
            float: left;
            overflow: hidden;
            margin-bottom: 10px;
            .video-box {
              width: calc(100% - 10px);
              height: 100%;
              border:1px solid #ddd;
              position: relative;
              .bottom-info {
                background: rgba(0, 0, 0, 0.5);
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                position: absolute;
                bottom: 0;
                .play-icon {
                  margin-left: 10px;
                  border: 1px solid #fff;
                  border-radius: 50%;
                }
              }
            }
            &:nth-child(5n) {
              .video-box {
                width: 100%;
              }
            }
          }
        }
      }
    }
    .dialog-box {
      position: relative;
      .footer-right {
        width: 620px;
      }
      table {
        width: 100%;
        border: 1px solid #ddd;
        border-spacing: 0;
        border-collapse:collapse;
        // &:nth-child(1) {
        //   tr {
        //     height: 35px;
        //     td, th {
        //       padding: 0 10px;
        //     }
        //   }
        // }
        tr {
            height: 70px;
            td, th {
              padding: 10px;
              button {
                width: 104px;
                font-size: 12px;
              }
              i {
                position: absolute;
                right: 5px;
                top: 50%;
                width: 16px;
                height: 16px;
                margin-top: -9px;
              }
            }
          }
          .period {
            height: 30px;
          }
        tr {
          width: 100%;
          th {
            background: #eff0f2;
            text-align: left;
            border: 1px solid #ddd;
            color: #979797;
          }
          td {
            border: 1px solid #ddd;
          }
          .hasAreaList {
            button {
              font-size: 12px;
              text-align: left;
              margin-bottom: 0;
              word-break:keep-all;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
              &:nth-child(3n) {
                margin-bottom: 20px;
              }
            }
          }
        }
      }
      .top-table {
        tr {
            height: 35px;
            td, th {
              padding: 0 10px;
            }
          }
      }
      .period-box-container {
        height: 420px;
        overflow-y: scroll;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .period-box {
          .period {
            height: 30px;
          }
        }
      .sm-tit {
        border-left: 2px solid $color;
        padding: 0 6px;
        margin: 20px 0 10px;
      }
    }
    .area-list {
      width: 100%;
      .area-num {
        color: #969696;
        font-size: 12px;
      }
      .list-box {
        margin-top: 15px;
        list-style: none;
        li {
          cursor: pointer;
          padding: 8px 0;
          color: #424242;
          i {
            display: none;
          }
        }
        .tick {
          color: $color;
          i {
            display: block;
          }
        }
      }
      .footer-right {
        width: 340px;
      }
    }
    .cutVideo {
      width: 100%;
      height: 460px;
      border: 1px solid #ddd;
    }
    .cut-info {
      position: absolute;
      bottom: 0;
      width: 100%;
      color: #434343;
    }
    .info {
      padding: 20px 20px 0;
      .tit {
        display: inline-block
      }
    }
    .footer-right {
      text-align: right;
      position: absolute;
      bottom: -20px;
      background: #f0f4f5;
      margin-left: -20px;
      height: 66px;
    }
  }
</style>

